<template>
    <div class="home h-100 position-relative">
        <Top></Top>
        <div class="container-big">
            <div class="row p-4">
                <div class="col-auto pb-3">
                    <el-card shadow="never" class="h-100 text-secondary text-center">
                        <div class="mb-4 hand"  @click="editUser = true">
                            <img class="w-h-40p mb-2" src="../common/img/userIcon.svg" alt="">
                            <p class="small ">用户信息</p> 
                        </div>

                        <div class="mb-4 hand" @click="passwordEdit = true">
                            <img class="w-h-40p mb-2" src="../common/img/keyIcon.svg" alt="">
                            <p class="small ">修改密码</p> 
                        </div>

                        <div class="mb-4 hand" @click="cameraMikeEdit = true">
                            <img class="w-h-40p mb-2" src="../common/img/cameraMikeIcon.svg" alt="">
                            <p class="small ">音视频设置</p> 
                        </div>
                        
                        <div class="mb-4 hand" @click="advancedSettingsEdit = true">
                            <img class="w-h-40p mb-2" src="../common/img/advancedSettingsIcon.svg" alt="">
                            <p class="small ">高级设置</p> 
                        </div>

                        <!-- <div class="mb-4 hand" @click="SystemInformation = true">
                            <img class="w-h-40p mb-2" src="../common/img/SystemInformationIcon.svg" alt="">
                            <p class="small ">系统信息</p> 
                        </div> -->

                    </el-card>
                </div>
                <div class="col pl-0"> 
                <div class="row justify-content-between small pb-2 pt-1">
                    <div class="col-auto">
                        <span class=" font-weight-bold text-secondary">今日课程</span>
                    </div>
                    <div class="col-auto">
                        <div class=" text-primary hand" @click="editCourse = true">
                          <span class="iconfont lwplus small"></span>
                          <span class=" font-weight-bold "> 创建课程</span> 
                        </div>
                       
                    </div>
                </div>
                <el-divider class="mt-0"></el-divider>
                <div class="row px-2"> 
                    <div class="col-12 col-lg-6 pb-3 px-2" v-for="o in 1">
                        <el-card shadow="never" :body-style="{ padding: '0px' }">
                            <div class="row m-0">
                                <!-- <div class="col-5 px-2">
                                    <el-image class="w-100 h-100 " src="https://imgs.genshuixue.com/343421835_87ghkebk.jpeg@1e_605w_340h_1c_0i_0o_90Q_1x.jpeg"
                                fit="cover" ></el-image>
                                </div> -->
                                <div class="col  py-3 ">
                                    <h6 class="mb-0 text-dark font-weight-bold">XXX课程名称（第二课）</h6>
                                    
                                    <p class="mb-0 text-secondary">
                                        <span class="iconfont lwclock_hollow mt-1 small"></span> 
                                        <span class=" din_alternatebold small"> 2020-03-10 15:00 ~ 16:00</span>
                                    </p>
                                    <el-divider class="mt-1  "></el-divider>
                                    <div class="position-absolute bottom right px-3   pb-2 mb-1">
                                        
                                        <el-button type="text" class="p-0 text-secondary" @click="editCourse = true">
                                            <span class="iconfont lwedit h6"></span>
                                        </el-button>
                                        <el-divider direction="vertical" class=" "></el-divider>
                                        <el-button type="text" class="p-0 text-secondary" @click="open">
                                            <span class="iconfont lwdelete h6"></span>
                                        </el-button>
                                        <el-divider direction="vertical" class=" "></el-divider>
                                        <el-button type="" size="mini"
                                            class="py-1 px-2 text-secondary rounded-100 border-dashed" @click="director = true">
                                            管理课前导播
                                        </el-button> 
                                        <el-button type="" size="mini"
                                            class="py-1 px-2 text-secondary rounded-100 border-dashed" @click="answer = true">
                                            管理互动答题
                                        </el-button>
                                       
                                    </div>
                                    <div class=" position-absolute top right pr-3 pt-2 ">
                                        <router-link to="room">
                                            <span class="iconfont lwcamera_solid text-success" style="font-size: 32px;"></span>
                                        </router-link>
                                    </div>
                             
                                </div>
                            </div>
                        </el-card>
                    </div> 
                </div>
                <div class=" small pb-2 pt-1"> 
                    <span class=" font-weight-bold text-secondary">本周课程按排 </span> 
                </div>
                <el-divider class="mt-0"></el-divider>
                <div class="row px-2"> 
                    <div class="col-12 col-lg-6  pb-3 px-2" v-for="o in 5">
                        <el-card shadow="never" :body-style="{ padding: '0px' }">
                            <div class="row m-0 px-3 py-2">
                                
                                <div class="col px-0 py-2">
                                    <h6 class="mb-0 text-dark font-weight-bold">XXX课程名称（第二课）</h6>
                                    
                                    <p class="mb-0 text-secondary">
                                        <span class="iconfont lwclock_hollow mt-1 small"></span> 
                                        <span class=" din_alternatebold small"> 2020-03-10 15:00 ~ 16:00</span>
                                    </p>
                                    <el-divider class="mt-1  "></el-divider>
                                    <div class="position-absolute bottom right pb-1 ">
                                        
                                        <el-button type="text" class="p-0 text-secondary" @click="editCourse = true">
                                            <span class="iconfont lwedit h6"></span>
                                        </el-button>
                                        <el-divider direction="vertical" class=" "></el-divider>
                                        <el-button type="text" class="p-0 text-secondary" @click="open">
                                            <span class="iconfont lwdelete h6"></span>
                                        </el-button>
                                        <el-divider direction="vertical" class=" "></el-divider>
                                        <el-button type="" size="mini"
                                            class="py-1 px-2 text-secondary rounded-100 border-dashed" @click="director = true">
                                            管理课前导播
                                        </el-button>
                                        <el-button type="" size="mini"
                                            class="py-1 px-2 text-secondary rounded-100 border-dashed" @click="answer = true">
                                            管理互动答题
                                        </el-button>
                                       
                                    </div>
                             
                                </div>
                            </div>
                        </el-card>
                    </div> 
                </div>
                <div class="row justify-content-between small pb-2 pt-1">
                    <div class="col-auto">
                        <span class=" font-weight-bold text-secondary">一周后课程按排</span>
                    </div>
                    <div class="col-auto">
                        <router-link to="/historyCourseList">
                          <span class=" text-dark font-weight-bold">查看更多已结束课程</span>  
                        </router-link>
                    </div>
                </div>
                <el-divider class="mt-0"></el-divider>
                <div class="row px-2"> 
                    <div class="col-12 col-lg-6  pb-3 px-2" v-for="o in 2">
                        <el-card shadow="never" :body-style="{ padding: '0px' }">
                            <div class="row m-0 px-3 py-2">
                                
                                <div class="col px-0 py-2">
                                    <h6 class="mb-0 text-dark font-weight-bold">XXX课程名称（第二课）</h6>
                                    
                                    <p class="mb-0 text-secondary">
                                        <span class="iconfont lwclock_hollow mt-1 small"></span> 
                                        <span class=" din_alternatebold small"> 2020-03-10 15:00 ~ 16:00</span>
                                    </p>
                                    <el-divider class="mt-1  "></el-divider>
                                    <div class="position-absolute bottom right pb-1 ">
                                        
                                        <el-button type="text" class="p-0 text-secondary" @click="editCourse = true">
                                            <span class="iconfont lwedit h6"></span>
                                        </el-button>
                                        <el-divider direction="vertical" class=" "></el-divider>
                                        <el-button type="text" class="p-0 text-secondary" @click="open">
                                            <span class="iconfont lwdelete h6"></span>
                                        </el-button>
                                        <el-divider direction="vertical" class=" "></el-divider>
                                        <el-button type="" size="mini"
                                            class="py-1 px-2 text-secondary rounded-100 border-dashed" @click="director = true">
                                            管理课前导播
                                        </el-button>
                                        <el-button type="" size="mini" class="py-1 px-2 text-secondary rounded-100 border-dashed" @click="answer = true">
                                            管理互动答题
                                        </el-button>
                                    </div>
                             
                                </div>
                            </div>
                        </el-card>
                    </div> 
                </div>
            </div>
            </div>
        </div>

        <!--编辑课程-->
        <el-drawer title="编辑课程" :visible.sync=" editCourse " :direction=" direction " size=" 480px ">
            <EditCourse></EditCourse>
        </el-drawer>


         <!--创建导播内容-->
        <el-drawer title=" 创建导播内容 " :visible.sync=" addDirector " :direction=" direction " size=" 450px ">
           <AddDirector></AddDirector>
        </el-drawer>

        <!--导播管理-->
        <el-drawer title=" 导播管理 " :visible.sync=" director " :direction=" direction " size=" 580px ">
            <div class=" position-absolute left right overflow-auto p-4" style="top: 65px; bottom: 0px;">
                <div class="p-3 text-center">
                    <h1 class="din_alternatebold text-din-data">00:01:08:45</h1>
                    <small class=" text-secondary">离开课还有</small>
                </div>
                <!-- <el-divider class="border-light-1 mt-0"></el-divider> -->
                <div class="h-80 overflow-auto">
                    <ul>
                        <li class="text-secondary pb-2">
                            <div class="row m-0">
                                <div class="col-3 p-0">
                                    <div class="border border-right-0 px-3 py-2 text-center">
                                        <p class="m-0 din_alternatebold h5">00:08:23</p>
                                        <small class=" opacity-50">已播完</small>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="border px-3 h6 font-weight-normal h-100 ">
                                        <div class="row h-100 d-flex align-items-center">
                                            <div class="col">机构宣传片</div>
                                            <div class="col-auto pt-1">
                                                <span class="el-icon-video-play h4 mr-2"></span>
                                                <span class="el-icon-refresh h4 "></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="text-success pb-2">
                            <div class="row m-0">
                                <div class="col-3 p-0">
                                    <div class="border border-success border-right-0 px-3 py-2 text-center">
                                        <p class="m-0 din_alternatebold h5">00:05:06</p>
                                        <small class=" opacity-50">正在播</small>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="border border-success px-3 h6 font-weight-normal h-100 ">
                                        <div class="row h-100 d-flex align-items-center">
                                            <div class="col">课程前导视频</div>
                                            <div class="col-auto pt-1">
                                                <span class="el-icon-video-play h4 mr-2"></span>
                                                <span class="el-icon-refresh h4 "></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="text-dark pb-2">
                            <div class="row m-0">
                                <div class="col-3 p-0">
                                    <div class="border border-right-0 px-3 py-2 text-center">
                                        <p class="m-0 din_alternatebold h5">00:00:00</p>
                                        <small class=" opacity-50">列队中</small>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="border px-3 h6 font-weight-normal h-100 ">
                                        <div class="row h-100 d-flex align-items-center">
                                            <div class="col">课前等待背景图+XXX.mp3</div>
                                            <div class="col-auto pt-1">
                                                <span class="el-icon-video-play h4 mr-2"></span>
                                                <span class="el-icon-refresh h4 "></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="text-secondary pb-2">
                            <el-button icon="el-icon-plus" @click="addDirector = true" class="w-100 border-dashed py-3">
                            </el-button>
        
                        </li>
                    </ul>
                </div>
            </div> 
        </el-drawer>

        <!--修改用户信息-->
        <el-dialog title=" 修改用户信息 " :visible.sync=" editUser "  width="480px">
            <MyEdit></MyEdit>
        </el-dialog>

        <!--修改密码-->
        <el-dialog title=" 修改密码 " :visible.sync=" passwordEdit " width="480px">
            <MyPasswordEdit></MyPasswordEdit>
        </el-dialog>

        <!--音视频设置对话框-->
        <el-dialog title=" 音视频设置 " :visible.sync=" cameraMikeEdit" width="414px" class="  el-dialog-body-top-1"  >
            <CameraMikeEdit></CameraMikeEdit>
        </el-dialog>

        <!--高级设置对话框-->
        <el-dialog title=" 高级设置 " :visible.sync=" advancedSettingsEdit "  width="414px" class="el-dialog-body-top-1">
            <AdvancedSettingsEdit></AdvancedSettingsEdit>
        </el-dialog>

        <!--查看系统信息对话框-->
        <el-dialog title=" 查看系统信息 " :visible.sync=" SystemInformation "  width="414px" class="el-dialog-body-top-1">
            <SystemInformation></SystemInformation>
        </el-dialog>

        <!--管理互动问题-->
        <el-drawer title=" 管理互动问题 " :visible.sync=" answer " size=" 480px "  >
            <Answer></Answer>
        </el-drawer>
 
    </div>
</template>
<script>
    import Top from 'components/top.vue'
    import MyEdit from 'components/myEdit' // 修改用户信息
    import MyPasswordEdit from 'components/myPasswordEdit' // 修改密码
    import CameraMikeEdit from 'components/cameraMikeEdit' // 音视频设置
    import AdvancedSettingsEdit from 'components/advancedSettingsEdit' // 高级设置
    import SystemInformation from 'components/systemInformation' // 查看系统信息
    import AddDirector from 'components/addDirector' // 创建导播内容
    import EditCourse from 'components/editCourse' // 编辑课程
    import Answer from 'components/answer' // 编辑互动答题

    export default {
        name: "Home",
        components: {
            Top,
            MyEdit,
            MyPasswordEdit,
            CameraMikeEdit,
            AdvancedSettingsEdit,
            SystemInformation,
            AddDirector,
            EditCourse,
            Answer
        },
        data() {
            return {
                imageUrl: '', // 上传头像图片
                editUser: false, // 编辑用户信息对话框 
                passwordEdit: false, // 修改密码对话框
                cameraMikeEdit: false, // 音视频设置对话框
                advancedSettingsEdit: false, // 高级设置对话框
                SystemInformation: false, // 查看系统信息对话框
                answer: false, // 编辑互动答题
                direction: 'rtl', // 抽屉右侧拉出 
                activeName: 'first', // 设置tab为第一个显示
                editCourse: false, // 编辑课程抽屉
                director: false, // 导播管理抽屉 
                addDirector: false, // 编辑导播内容抽屉  
            }
        },
        methods: {
            // 删除课程提示
            open() {
                this.$confirm('一但删除此课程将不可恢复, 是否继续?', '删除提示', {
                    confirmButtonText: '继续删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    
    .avatar {
        width: 100%;
        height: 150px;
        display: block;
    }
    
    .el-form-item__content {
        line-height: 32px;
    }
    
    .el-tabs .el-table th.is-leaf {
        background-color: #EBEEF5
    }
    
    .el-dialog-body-top-1 .el-table th.is-leaf {
        background-color: #EBEEF5
    }
    
    .container-big {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .el-dialog-body-top-1 .el-dialog__body {
        padding-top: 10px !important;
    }
</style>